<template>
	<view class="mainbgc" @click="hidefalse">
		<header-top :messageInfo="{typeFlag:true,message:'退货单',liner:false}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content flexleft">
					<!-- <view class="nostrongtext margin_right" @click="submit">提交</view> -->
					<view class="diandiandian" @click.stop="dian">
						<view class="selectcontent" v-show="selectshow">
							<!-- <view class="topbox" @click.stop="lishidanju">
								<view class="flexleft itemselect">
									<view class="leftimage margin_right">
										<image src="../../../static/image/system/lishidanj.png" mode=""></image>
									</view>
									<view>历史单据</view>
								</view>
							</view> -->
							<view class="topbox">
								<view class="flexleft itemselect" @click.stop="qingkong">
									<view class="leftimage margin_right">
										<image src="../../../static/image/system/shanchu.png" mode=""></image>
									</view>
									<view>清空单据</view>
								</view>
							</view>
							<view class="topbox">
								<view class="flexleft itemselect" @click.stop="startPrint">
									<view class="leftimage margin_right">
										<image src="../../../static/image/system/dayin.png" mode=""></image>
									</view>
									<view>打印</view>
								</view>
							</view>
							<view class="sanjiao"></view>
						</view>
					</view>
				</view>
			</view>
		</header-top>
		<!-- 选择供应商选择仓库 -->
		<view class="margin_top mainpadding ffffff">
			<view class="flexbetween">
				<view :class="dataAll.custom_name?'lansebtn allbtn':'allbtn huisebtn'"
					@click="selectRole('/pages/workbench/jiben/kehuda?type=1',1)">
					{{dataAll.custom_name || '客户名称'}}
				</view>
				<view :class="dataAll.warehouse_name?'lansebtn allbtn':'allbtn huisebtn'"
					@click="selectRole('/pages/workbench/jiben/cangkuda?type=1')">
					{{dataAll.warehouse_name || '选择仓库'}}
				</view>
				<view v-if="dataAll.ps_type==2" :class="dataAll.send_staff_name?'lansebtn allbtn':'allbtn huisebtn'"
					@click="selectRole('/pages/workbench/jiben/yuangongda?type=1')">
					{{dataAll.send_staff_name || '选择送货员'}}
				</view>
			</view>
			<template v-if="dataAll.custom_name">
				<view class="flexbetween margin_top">
					<view class="strongtext">客户：{{dataAll.custom_name}}</view>
				</view>
				<view class="flexbetween">
					<view class="nostrongtext margin_top">姓名：{{dataAll.custom_data.username}}</view>
					<view class="nostrongtext margin_top">{{dataAll.custom_data.customlevel.name}}</view>
				</view>
				<view class="flexbetween">
					<view class="nostrongtext margin_top">
						地址：{{dataAll.custom_data.cityinfo}}{{dataAll.custom_data.address}}</view>
					<view class="nostrongtext margin_top" style="min-width: 80rpx;color: #ffa126;" v-show="dataAll.custom_data.is_df==1">到付</view>
				</view>
		
				<view class="flexbetween margin_top">
					<view class="nostrongtext">{{dataAll.purchase_code}}</view>
					<view class="nostrongtext">{{dataAll.settlementtype_name || ""}}</view>
				</view>
				<view class="flexleft margin_top">
					<!-- <view class="lansetext margin_right" @click="qiankuanlist">
						欠款：<text class="xiaohong">{{dataAll.custom_data.qk_price || 0}}</text>
					</view>
					<view class="lansetext" @click="yushoukuan">
						预收款：<text class="xiaolv">{{dataAll.custom_data.money || 0}}</text>
					</view> -->
					<view class="lansetext margin_right">
						总欠款：<text class="xiaohong">{{dataAll.custom_data.qk_price || 0}}</text>
					</view>
					<view class="lansetext">
						余额：<text class="xiaolv">{{dataAll.custom_data.money || 0}}</text>
					</view>
				</view>
			</template>
		
		</view>
		<!--商品名称-->
		<view class="ffffff margin_top" v-if="dataAll.data.length!=0">
			<view class="flexbetween mainpadding">
				<view class="bigtext flex2">商品名称1</view>
				<view class="bigtext flex2s">规格</view>
				<view class="bigtext flex1s">数量</view>
				<view class="bigtext flex1s">单价</view>
			</view>
			<view class="mainpadding2" v-for="(item,index) in dataAll.data" :key="index" @click="xgdjmx(item,index)">
				<view class="shangpin">
					<view class="flexbetween">
						<view class="nostrongtext flex2">{{item.goodsinfo.name}}</view>
						<view class="nostrongtext flex2s">{{item.goods_sku_name}}</view>
						<view class="strongtext flex1s">*{{item.num}}</view>
						<view class="strongtext flex1s">{{item.price}}</view>
					</view>
					<view class="margin_top">
						<view class="huisetext">备注：{{item.notes}}</view>
					</view>
					<!-- 赠品信息 -->
					<view class="flexbetween" v-if="item.send_num">
						<view class="huisetext flex2" style="color: #ffa126 ;">赠品备注：{{item.send_notes}}</view>
						<view class="nostrongtext flex2s"  style="color: #ffa126 ;">{{item.goods_sku_name}}</view>
						<view class="strongtext flex1s"  style="color: #ffa126 ;">*{{item.send_num}}</view>
						<view class="strongtext flex1s"  style="color: #ffa126 ;">0</view>
					</view>
				</view>
			</view>
			<view class="flexbetween mainpadding2">
				<view class="littlesmall">合计：</view>
				<view class="littlesmall">{{hejiAll.goods_zl_num}}种/{{hejiAll.goods_num}}件</view>
				<view class="littlesmall" style="color: #0BBDCB;">{{Number(hejiAll.total_goods_price)}}元</view>
			</view>
		</view>
		<view class="mainpadding_top ffffff flexbetween">
			<view class="strongtext"  style="min-width: 320rpx;">配送方式（送货）</view>
			<u-radio-group style="flex: 0;" v-model="dataAll.ps_type" placement="row" circle>
				<u-radio activeColor="#0BBDCB" :customStyle="{marginRight: '30rpx'}" label="自提" name="1"></u-radio>
				<u-radio activeColor="#0BBDCB" label="配送" name="2"></u-radio>
			</u-radio-group>
		</view>
		<view class="mainpadding_top ffffff flexbetween" v-if="dataAll.data.length">
			<view class="strongtext" style="min-width: 320rpx;">优惠</view>
			<input type="number" style="text-align: center;" placeholder="请输入" v-model="dataAll.discount_price">
		</view>
		<view class="mainpadding_top ffffff flexbetween" v-show="dataAll.ps_type==2 && dataAll.data.length">
			<view class="strongtext" style="min-width: 320rpx;">运费</view>
			<input type="number" style="text-align: center;" placeholder="请输入" v-model="dataAll.yf_price">
		</view>
		<view class="" style="padding-bottom: 150rpx;">
			<view class="ffffff mainpadding_top">
				<view class="titletext">备注</view>
				<textarea class="textarea mainpadding radius margin_top" placeholder="请输入退货单备注" v-model="dataAll.notes"></textarea>
			</view>
			<!-- 计数量 -->
			<view class="mainpadding"  v-if="dataAll.data.length!=0">
				<view class="flexleft flex_wrap">
					<view class="nostrongtext youbianju">退货金额:
						<text class="lvsetext">{{Number(hejiAll.total_goods_price)}}元</text>
					</view>
					<view class="nostrongtext xiaoshou youbianju" v-show="dataAll.discount_price">优惠:
						<text class="lvsetext">{{dataAll.discount_price}}元</text>
					</view>
					<view class="nostrongtext xiaoshou youbianju"  v-show="dataAll.yf_price">运费:
						<text class="lvsetext">{{dataAll.yf_price}}元</text>
					</view>
					<view class="lvsetext">积分:
						<text class="lvsetext">-{{hejiAll.total_score}}</text>
					</view>
				</view>
				<view class="flexleft margin_top">
					<view class="nostrongtext xiaoshou youbianju">合计:
						<text class="lvsetext">{{Number(hejiAll.total_goods_price) - Number(dataAll.discount_price) - Number(dataAll.yf_price)}}元</text>
					</view>
				</view>
			</view>
			<view class="mainpadding2">
				<view class="surebtns" @click="submit">提交</view>
			</view>
		</view>
		
		<!-- 底部 -->
		<view class="ffffff dibu flexbetween">
			<view class="shuruk flexbetween">
				<input type="text" class="inputs" placeholder="输入商品首拼/编号" disabled disabled="" @click="tianjia(1)">
				<view class="tianjia" @click="tianjia(2)">添加</view>
			</view>
			<view class="scan2" @click="scanbarCode()"></view>
		</view>
		<moDal :message="{modalShow:modal.modalShow,title:modal.title}" @modalSure="modalSure"></moDal><!-- 模态框 -->
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				selectshow: false,
				dataAll: {
					discount_price: "", //优惠金额
					warehouse_id: "", //仓库ID
					warehouse_name: "", //仓库名称
					custom_id: "", //客户ID
					custom_name: "", //客户名称
					custom_data: {}, //客户数据信息
					send_staff_id: "", //送货员ID
					send_staff_name: "", //送货员名称
					yf_price: "", //运费
					ps_type: "1", //配送方式
					notes: "", //备注
					custom_visit_id:"",
					data: [],
				},
				hejiAll: {},
				// 模态框
				modal: {
					modalShow: false,
					title: "",
				},
				bfFlag:false,
				wfxzflag:true,
				clearremove:false,
			}
		},
		onLoad(options) {
			if(options.data){//拜访数据进入
				let data = JSON.parse(decodeURIComponent(options.data));
				this.dataAll.custom_id = data.id
				this.dataAll.custom_name = data.name
				this.dataAll.custom_data = data.data
				this.dataAll.custom_visit_id = data.custom_visit_id
				this.bfFlag = true
				this.refreshmsg()
			}
		},
		onShow() {
			uni.$off("ckSelectFn")
			uni.$on("ckSelectFn", data => {
				this.wfxzflag = false
				this.dataAll.warehouse_id = data.id
				this.dataAll.warehouse_name = data.name
				return false
			})
			uni.$off('khSelectFn');
			uni.$on('khSelectFn', (data) => {
				this.wfxzflag = false
				this.dataAll.custom_id = data.id
				this.dataAll.custom_name = data.name
				this.dataAll.custom_data = data.data
				return false
			})
			uni.$off('ygSelectFn');
			uni.$on('ygSelectFn', (data) => {
				this.wfxzflag = false
				this.dataAll.send_staff_id = data.id
				this.dataAll.send_staff_name = data.name
				return false
			})
			if (this.wfxzflag && uni.getStorageSync("tuihuodanInfo")) {
				this.dataAll = JSON.parse(uni.getStorageSync("tuihuodanInfo"))
				this.init()
			}else{
				this.wfxzflag = true
			}
		},
		watch: {
			dataAll: {
				deep: true,
				handler(newval) {
					if (this.hejiAll) {
						this.dataAll.yf_price = this.dataAll.ps_type == 2 ? this.dataAll.yf_price : ""
						
					}
					this.refreshmsg()
				}
			}
		},
		onUnload() {
			let total_price = Number(this.hejiAll.total_goods_price) - Number(this.dataAll.discount_price) - Number(this.dataAll.yf_price)
			if (total_price < 0) {
				this.dataAll.discount_price = ""
				this.dataAll.yf_price = ""
			}
			
			if(!this.clearremove){
				this.refreshmsg()
			}
		},
		methods: {
			selectRole(url,val) {
				if(val==1 && this.bfFlag){
					httpRequest.toast("当前数据为拜访数据，不可选择客户！")
					return false
				}
				uni.navigateTo({
					url
				})
			},
			init() {
				let data = JSON.parse(JSON.stringify(this.dataAll.data))
				data.forEach(item => {
					delete item.goodsinfo
					delete item.goods_sku_name
				})
				let tuihuodanInfo = {
					discount_price: 0,
					warehouse_id: this.dataAll.warehouse_id,
					custom_id: this.dataAll.custom_id,
					yf_price: this.dataAll.yf_price,
					send_staff_id: this.dataAll.send_staff_id,
					ps_type: this.dataAll.ps_type,
					data,
				}
				httpRequest.request('/dhtapi/Salethorder/sure', 'POST', tuihuodanInfo, false, false, true).then(res => {
					this.hejiAll = res.data
				}).catch(err => {})
			},
			// 数据刷新
			refreshmsg() {
				let _this = this
				uni.setStorageSync('tuihuodanInfo', JSON.stringify(this.dataAll))
			},
			//跳转修改单据明细
			xgdjmx(item,index) {
				if (this.selectshow == true) {
					this.selectshow = false
					return
				}
				let obj = {
					type:4,
					item,
					index
				}
				uni.navigateTo({
					url: '/pages/workbench/xiaoshou/xiugaidjmx?msg=' + encodeURIComponent(JSON.stringify(obj))
				})
			},
			//跳转添加商品页面
			tianjia(value) {
				if (this.dataAll.custom_id == "") {
					httpRequest.toast("请选择客户")
					return false
				}
				if (this.dataAll.warehouse_id == "") {
					httpRequest.toast("请选择仓库")
					return false
				}
				if(this.dataAll.ps_type==2){
					if (this.dataAll.send_staff_id == "") {
						httpRequest.toast("请选择送货员")
						return false
					}
				}
				let data = {
					type: 4, //退货单
					warehouse_id: this.dataAll.warehouse_id,
					custom_id: this.dataAll.custom_id,
					keyword:""
				}
				uni.navigateTo({
					url: '/pages/workbench/xiaoshou/tianjspxsdd?getmsg=' + encodeURIComponent(JSON.stringify(
						data))
				})
			},
			scanbarCode() {
				let that = this
				if (that.dataAll.custom_id == "") {
					httpRequest.toast("请选择客户")
					return false
				}
				if (that.dataAll.warehouse_id == "") {
					httpRequest.toast("请选择仓库")
					return false
				}
				if(this.dataAll.ps_type==2){
					if (this.dataAll.send_staff_id == "") {
						httpRequest.toast("请选择送货员")
						return false
					}
				}
				// 允许从相机和相册扫码
				uni.scanCode({
					success: function(res) {
						// console.log('条码类型：' + res.scanType);
						// console.log('条码内容：' + res.result);
						let data = {
							type: 4, //退货单
							warehouse_id: that.dataAll.warehouse_id,
							custom_id: that.dataAll.custom_id,
							keyword:res.result
						}
						uni.navigateTo({
							url: '/pages/workbench/xiaoshou/tianjspxsdd?getmsg=' + encodeURIComponent(JSON.stringify(
								data))
						})
					},
					fail(err) {
						console.log('错误信息：' + err);
					}
				});
			},
			//跳转历史单据
			lishidanju() {
				if (this.kehu.id == "") {
					httpRequest.toast('请选择客户')
					return false
				}
				let obj = {
					kh_id: this.kehu.id,
					type: 1 //1,退货单
				}
				uni.navigateTo({
					url: '/pages/workbench/xiaoshou/lishidanju?msg=' + encodeURIComponent(JSON.stringify(obj))
				})
			},
			// 跳转销售单-预售款金额
			yushoukuan() {
				let data = {
					customers_id: this.dataAll.customers_id
				}
				uni.navigateTo({
					url: '/pages/workbench/xiaoshou/xiaoshoudanxskje?msg=' + encodeURIComponent(JSON.stringify(
						data))
				})
			},
			
			// 提交单据
			submit() {
				if (this.dataAll.custom_id == "") {
					httpRequest.toast("请选择客户")
					return false
				}
				if (this.dataAll.warehouse_id == "") {
					httpRequest.toast("请选择仓库")
					return false
				}
				if(this.send_staff_id=="" && this.dataAll.ps_type==2){
					httpRequest.toast("请选择送货员")
					return false
				}
				if (!this.dataAll.data.length) {
					httpRequest.toast("请添加商品")
					return false
				}
				let yf_price = this.dataAll.ps_type == 2 ? this.dataAll.yf_price : 0
				let total_price = Number(this.hejiAll.total_goods_price) - Number(this.dataAll.discount_price) - Number(this.dataAll.yf_price)
				if (total_price < 0) {
					httpRequest.toast("您的当前单据输入金额已超过总金额，请核查！")
					return false
				}
				let data = JSON.parse(JSON.stringify(this.dataAll.data))
				data.forEach(item => {
					delete item.goodsinfo
					delete item.goods_sku_name
				})
				let tuihuodanInfo = {
					discount_price: this.dataAll.discount_price,
					warehouse_id: this.dataAll.warehouse_id,
					custom_id: this.dataAll.custom_id,
					notes: this.dataAll.notes,
					ps_type: this.dataAll.ps_type,
					yf_price: this.dataAll.yf_price,
					send_staff_id: this.dataAll.send_staff_id,
					custom_visit_id: this.bfFlag?this.dataAll.custom_visit_id:"",
					data,
				}
				httpRequest.request('/dhtapi/Salethorder/addSalethOrder', 'POST', tuihuodanInfo, false, false, true)
					.then(res => {
						httpRequest.toast(res.msg)
						if (res.code == 1) {
							// uni.setStorageSync('tuihuodanInfo', "")
							this.dataAll.data = []
							this.dataAll.custom_visit_id = ""
							this.dataAll.discount_price = ""
							this.dataAll.notes = ""
							this.dataAll.yf_price = ""
							this.refreshmsg()
							setTimeout(function() {
								uni.navigateBack(1)
							}, 500)
						}
					}).catch(err => {
						httpRequest.toast(err.msg);
					})
			},
			dian() {
				this.selectshow = this.selectshow == false ? true : false
			},
			hidefalse() {
				if (this.selectshow == true) {
					this.selectshow = false
					return
				}
			},
			qingkong() {
				this.selectshow = false
				this.modal.modalShow = true
				this.modal.title = "确认清空单据？"
			},
			modalSure() {
				this.modal.modalShow = false
				if (this.modal.title == "确认清空单据？") {
					this.clearremove = true
					uni.setStorageSync('tuihuodanInfo', "")
					httpRequest.toast("清除成功")
					setTimeout(function() {
						uni.navigateBack(1)
					}, 500)
				}
			},
			// 开始打印
			startPrint() {
				this.selectshow = false
				this.dyjshow = true
			},
		}
	}
</script>

<style lang="scss" scoped>
	.textarea {
		box-sizing: border-box;
		width: 100%;
		background-color: #F8F8F8;
		height: 180rpx;
	}
	.flex2 {
		flex: 2;
	}

	.flex2s {
		flex: 2;
		text-align: center;
	}

	.hongsetext {
		color: #FF0000;
	}

	.jine {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #00B855;
		padding-right: 30rpx;
	}

	.hongse {
		color: #FF0000;
	}

	.lvsetext {
		color: #00B855;
	}

	.youbianju {
		margin-right: 30rpx;
	}

	.huisetext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.flex1 {
		flex: 1;
		text-align: right;
	}

	.flex1s {
		flex: 1;
		text-align: center;
	}

	.paddingright {
		padding-right: 36rpx;
	}

	.lansetext {
		font-size: 24rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #0BBDCB;
	}

	.lansetextline {
		text-decoration: underline #0BBDCB;
	}

	.lansebtn {
		color: #0BBDCB;
		background: rgba(11, 189, 203, .1);
	}
	/deep/.u-radio-group {
		flex: none !important;
	}

	.huisebtn {
		color: #999999;
		background: rgba(153, 153, 153, .1);
	}

	.duihao {
		position: absolute;
		left: 0;
		background-image: url('@/static/image/system/duihao.png');
		width: 30rpx;
		height: 30rpx;
		background-size: 100% 100%;
	}

	.lansetextwbk {
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #0BBDCB;
		padding-right: 30rpx;
	}

	.juzhong {
		text-align: center;
	}

	.xiabiakuang {
		position: relative;
		padding-bottom: 30rpx;
		border-bottom: 2rpx solid rgba(153, 153, 153, .1);
		min-width: 500rpx;
	}

	// /deep/.u-popup__content {
	// 	width: 100%;
	// }

	// .fangan {
	// 	overflow: auto;
	// 	height: 800rpx;
	// }

	.zhengds {
		padding: 40rpx;
	}

	.shangpin {
		padding-bottom: 30rpx;
		border-bottom: 1px solid rgba(153, 153, 153, 0.05);
	}

	.btns {
		width: 198rpx;
		height: 62rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	.littlesmall {
		font-size: 28rpx;
		font-weight: bold;
	}

	.btn2 {
		color: #FFFFFF;
		background: #0BBDCB;
		border-radius: 74rpx;
		margin-left: 30rpx;
	}

	.btn1 {
		border: 1rpx solid #0BBDCB;
		color: #0BBDCB;
		background: #FFFFFF;
		border-radius: 74rpx;
	}

	.xiahuaxian {
		text-decoration: underline #333333;
	}

	.quedinng {
		margin-right: 30rpx;
	}

	.shurudh {
		padding-left: 30rpx;
		border-radius: 24rpx;
		height: 60rpx;
		font-size: 30rpx;
		width: 460rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		background: rgba(217, 217, 217, .2);
	}

	.topbox {
		border: 2rpx solid rgba(255, 255, 255, .1);
	}

	.dibu {
		width: 100%;
		padding: 30rpx 30rpx;
		position: fixed;
		z-index: 1000;
		bottom: 0;
		left: 0;
		box-sizing: border-box;
	}

	.tianjia {
		height: 62rpx;
		width: 136rpx;
		background: rgba(11, 189, 203, .1);
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
		border-radius: 98px 98px 98px 98px;
	}

	.inputs {
		height: 62rpx;
		width: 70%;
		font-size: 28rpx;
		padding-left: 44rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.shuruk {
		width: 90%;
		background: rgba(217, 217, 217, .2);
		border-radius: 74rpx;
	}

	.shangtext {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.bigtext {
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.leixingbtn {
		color: #999999;
		background: rgba(153, 153, 153, .1);
		border-radius: 50rpx;
	}

	.allbtn {
		width: 218rpx;
		height: 52rpx;
		border-radius: 50rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	// 定位点点点
	.diandiandian {
		position: relative;
	}

	.selectcontent {
		position: absolute;
		top: 50rpx;
		right: -6rpx;
		min-width: 250rpx;
		mix-width: 250rpx;
		text-align: center;
		background-color: rgba(11, 189, 203, 0.8);
		border-radius: 10rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #fff;
		word-wrap: break-word;
	}

	.sanjiao {
		position: absolute;
		top: -12rpx;
		right: 8rpx;
		background-image: url("@/static/image/system/sanjiao2.png");
		width: 40rpx;
		height: 12rpx;
		background-size: 100% 100%;
	}

	.leftimage {
		width: 34rpx;
		height: 34rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.itemselect {
		padding: 20rpx 30rpx;
	}
</style>
